<template>
    <div class="homePage_top">
		<!--<p class="homePage_top_p1">{{language_homePage.title1}}</p>
		<p class="homePage_top_p2">{{language_homePage.title2}}</p>
		<div class="homePage_top_seach" id='homePage_top_input'>
			<div class="homePage_top_seach2" >
				<el-select v-model="select" placeholder="请选择" class='homePage_top_select'>
				    <el-option
				    	key='1'
				      :label="language_homePage.Products"
				      value="1">
				    </el-option>

				    <el-option
				    	key='2'
				      :label="language_homePage.Suppliers"
				      value="2">
				    </el-option>
			  	</el-select>
			  	<input type="text" v-model="search" class="homePage_top_input" :placeholder="language_homePage.placeholder" @keyup="SearchData($event)" />
			  	<div class="homePage_top_img" @click='SearchData($event,1)'>
			  		<img src="../../../../../static/img/images/search.png" />
			  		<p>{{language_homePage.Search}}</p>
			  	</div>
			</div>
            <ul v-if='vagueList.length>0' class='homePage_top_WordList' :style='{width:inputWidth+"px",left:inputLeft+"px"}'>
                <li v-for='(list,index) in vagueList' :key='index' v-if='index<6' @click='changeSearchWord(list)'>{{list}}</li>
            </ul>
			
		</div>
		-->
	</div>
</template>

<script>
    export default {
    	watch:{
    		homePageStatus(val){
    			this.language_homePage=val.buyers_homePage;
    		},
            search(val){
                this.wordList();
            }
    	},
    	props:[
    		'homePageStatus'
    	],
        data: function(){
            return {
            	language_homePage:[],
            	select:'1',
            	search:'',
            	vagueList:[],
                inputWidth:0,
                inputLeft:0,
                
            }
        },
        mounted(){
        	this.language_homePage=this.homePageStatus.buyers_homePage;
            this.inputLeft=140;
        	
        },
        methods: {
            changeSearchWord(val){
                this.search=val;
                this.SearchData(0,1);
            },
            wordList(){
                let url=this.defines.search_url+'/search/getRelateKeywords';
                let productData={
                    param: this.search
                }
                this.ajax(this,{
                    'url':url,
                    'type':'post',
                    'data':productData,
                    'callback':data=>{
                        let datalist=data.data;
                        if(datalist.data.length>0){
                            this.vagueList=datalist.data;
                        }else{
                            this.vagueList=[];
                        }
                    },
                    'errorback':errory=>{
                        this.vagueList=[];
                    },
                });
            },
        	SearchData(event,type){
        		if((type==1 || event.keyCode==13) && this.search !=''){
        			this.$router.push({path:'/search',query:{searchWord:this.search,type:this.select}});
        		}
        		if(this.search =='' &&(type==1 || event.keyCode==13)){
        			this.$message({
						message: this.language_homePage.Message,
						type: 'error'
					});
        		}
				
			},
        	
        }
    }
</script>

<style scoped>
	.clear2:after {
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
	}
	
	.clear2 {
		zoom: 1
	}
	
    .homePage_top{
    	padding: 85px 0 53px 0;
        position: relative;z-index: 23;
    }
    .homePage_top_p1{
    	text-align: center;
    	color: #000;
    	font-size: 38px;
    }
    .homePage_top_p2{
    	text-align: center;
    	color: #000;
    	font-size: 24px;
    	margin-top: 5px;
    }
    .homePage_top_seach{
    	
    	width: 70%;
    	box-sizing: border-box;
    	background: #e5e5e5;
    	padding: 15px 20px;
    	
    	margin: 35px auto;
        position: relative;
    }
    .homePage_top_seach2{
    	width: 100%;
    	box-sizing: border-box;
    	border: 1px solid #7699f8;
    	padding: 1px 0;
    	position: relative;
    }
    .homePage_top_select{
    	width: 118px;
    	border-right:1px solid #e2e7eb;
    	position: absolute;
    	top: 1px;
    	left: 0;
    	
    	
    }
    .homePage_top_input{
    	display: block;
    	height: 40px;
    	line-height: 40px;
    	border: 0;
    	box-sizing: border-box;
    	width: 100%;
    	padding: 0 120px 0 135px;
    	
    	
    }
    .homePage_top_input:focus{
    	 outline: none;
    }
    .homePage_top_img{
    	position: absolute;
    	right: 0;
    	top: 0px;
    	background: #7699f8;
    	width: 120px;
    	height: 42px;
    	display: flex;
    	align-items: center;
    	cursor: pointer;
    }
    .homePage_top_img img{
    	width: 52px;
    	height: 42px;
    	
    }
    .homePage_top_img p{
    	width: 10px;
    	flex: 1;
    	font-size: 14px;
    	text-indent: 10px;
    	color: #fff;
    }
    
.homePage_top_WordList{position: absolute;background: #fff;border:1px solid #e5e5e5;box-sizing:border-box;}
.homePage_top_WordList li{list-style: none;cursor: pointer;padding-left: 20px;height: 30px;line-height: 30px;z-index:10000;font-size: 14px;color:#333;}
.homePage_top_WordList li:hover{color:#7699f8;}
</style>
<style>
	
	.homePage .homePage_top_select .el-input__inner{
		border: 0;
		height: 40px;
	}
	
</style>